<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-02 21:58:43
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-05 16:56:15
-->
<template>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        style="margin:auto;display:block;position:fixed;left:50%;top:50%;margin-left:-100px;margin-top:-100px;"
        width="200px"
        height="200px"
        viewBox="0 0 100 100"
        preserveAspectRatio="xMidYMid"
    >
        <defs>
            <pattern
                id="ldio-xhe8r862jqh-pattern"
                patternUnits="userSpaceOnUse"
                x="0"
                y="0"
                width="100"
                height="100"
            >
                <rect x="0" y="0" width="100" height="100" fill="#f1f5f9" />
                <circle cx="43" cy="0" r="6" fill="#6ad8f8" transform="translate(0 69.1226)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 119;0 -19"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.0151515151515151s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="72" cy="0" r="6" fill="#6ad8f8" transform="translate(0 -28.9947)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 146;0 -46"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.3333333333333333s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="22" cy="0" r="6" fill="#6ad8f8" transform="translate(0 44.034)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 122;0 -22"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.2878787878787878s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="6" cy="0" r="3" fill="#6ad8f8" transform="translate(0 -12.5547)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 139;0 -39"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.24242424242424243s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="36" cy="0" r="4" fill="#6ad8f8" transform="translate(0 107.508)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 124;0 -24"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.6363636363636364s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="0" cy="0" r="3" fill="#6ad8f8" transform="translate(0 35.8055)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 104;0 -4"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.4242424242424243s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="27" cy="0" r="7" fill="#6ad8f8" transform="translate(0 72.2512)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 109;0 -9"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.9393939393939394s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="53" cy="0" r="7" fill="#6ad8f8" transform="translate(0 22.5568)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 135;0 -35"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.4696969696969697s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="59" cy="0" r="4" fill="#6ad8f8" transform="translate(0 0.599609)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 141;0 -41"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.12121212121212122s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="52" cy="0" r="3" fill="#6ad8f8" transform="translate(0 -48.2118)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 152;0 -52"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.4393939393939394s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="36" cy="0" r="4" fill="#6ad8f8" transform="translate(0 139.743)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 140;0 -40"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.4696969696969697s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="29" cy="0" r="5" fill="#6ad8f8" transform="translate(0 83.3083)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 117;0 -17"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.8484848484848485s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="29" cy="0" r="5" fill="#6ad8f8" transform="translate(0 132.04)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 148;0 -48"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.5909090909090909s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="88" cy="0" r="8" fill="#6ad8f8" transform="translate(0 51.5253)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 139;0 -39"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.2121212121212122s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="12" cy="0" r="3" fill="#6ad8f8" transform="translate(0 54.4741)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 108;0 -8"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.1666666666666667s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="94" cy="0" r="4" fill="#6ad8f8" transform="translate(0 43.8283)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 110;0 -10"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.303030303030303s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="13" cy="0" r="5" fill="#6ad8f8" transform="translate(0 12.9711)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 130;0 -30"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.06060606060606061s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="63" cy="0" r="4" fill="#6ad8f8" transform="translate(0 84.6968)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 142;0 -42"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.9393939393939394s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="9" cy="0" r="8" fill="#6ad8f8" transform="translate(0 38.6626)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 112;0 -12"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.3636363636363635s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="63" cy="0" r="3" fill="#6ad8f8" transform="translate(0 111.92)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 134;0 -34"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.6666666666666666s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="97" cy="0" r="7" fill="#6ad8f8" transform="translate(0 77.4026)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 119;0 -19"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.9242424242424242s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="41" cy="0" r="3" fill="#6ad8f8" transform="translate(0 -27.5203)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 134;0 -34"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.4090909090909091s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="63" cy="0" r="3" fill="#6ad8f8" transform="translate(0 30.1653)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 139;0 -39"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.393939393939394s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="77" cy="0" r="3" fill="#6ad8f8" transform="translate(0 -7.00607)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 136;0 -36"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.21212121212121213s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="35" cy="0" r="4" fill="#6ad8f8" transform="translate(0 -1.79472)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 153;0 -53"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.09090909090909091s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="40" cy="0" r="4" fill="#6ad8f8" transform="translate(0 -34.5604)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 148;0 -48"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.36363636363636365s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="7" cy="0" r="4" fill="#6ad8f8" transform="translate(0 54.9369)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 114;0 -14"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.1666666666666667s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="34" cy="0" r="3" fill="#6ad8f8" transform="translate(0 -1.66884)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 116;0 -16"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.30303030303030304s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="5" cy="0" r="3" fill="#6ad8f8" transform="translate(0 122.725)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 139;0 -39"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.6060606060606061s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="100" cy="0" r="3" fill="#6ad8f8" transform="translate(0 53.0454)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 132;0 -32"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.196969696969697s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="93" cy="0" r="7" fill="#6ad8f8" transform="translate(0 88.2626)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 112;0 -12"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.7575757575757576s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="51" cy="0" r="5" fill="#6ad8f8" transform="translate(0 56.0168)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 128;0 -28"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.1666666666666667s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="84" cy="0" r="5" fill="#6ad8f8" transform="translate(0 104.042)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 147;0 -47"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.803030303030303s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="14" cy="0" r="3" fill="#6ad8f8" transform="translate(0 108.291)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 151;0 -51"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.7878787878787878s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="31" cy="0" r="4" fill="#6ad8f8" transform="translate(0 110.265)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 139;0 -39"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.7121212121212122s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="58" cy="0" r="7" fill="#6ad8f8" transform="translate(0 90.4625)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 147;0 -47"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.9090909090909091s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="88" cy="0" r="4" fill="#6ad8f8" transform="translate(0 -9.246)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 122;0 -22"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.3333333333333333s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="70" cy="0" r="4" fill="#6ad8f8" transform="translate(0 79.6169)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 121;0 -21"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.9090909090909091s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="81" cy="0" r="7" fill="#6ad8f8" transform="translate(0 73.1511)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 123;0 -23"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.9848484848484849s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="16" cy="0" r="3" fill="#6ad8f8" transform="translate(0 56.6339)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 136;0 -36"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.1666666666666667s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="25" cy="0" r="6" fill="#6ad8f8" transform="translate(0 104.848)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 131;0 -31"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.7121212121212122s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="25" cy="0" r="4" fill="#6ad8f8" transform="translate(0 60.6596)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 141;0 -41"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.1363636363636365s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="30" cy="0" r="6" fill="#6ad8f8" transform="translate(0 31.3481)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 152;0 -52"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.3636363636363635s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="96" cy="0" r="6" fill="#6ad8f8" transform="translate(0 21.531)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 144;0 -44"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.4545454545454546s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="28" cy="0" r="8" fill="#6ad8f8" transform="translate(0 122.668)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 131;0 -31"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.5454545454545454s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="39" cy="0" r="4" fill="#6ad8f8" transform="translate(0 66.4568)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 114;0 -14"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.0303030303030303s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="11" cy="0" r="8" fill="#6ad8f8" transform="translate(0 68.2568)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 121;0 -21"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.0303030303030303s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="64" cy="0" r="7" fill="#6ad8f8" transform="translate(0 29.0683)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 124;0 -24"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.4393939393939394s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="25" cy="0" r="8" fill="#6ad8f8" transform="translate(0 141.851)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 144;0 -44"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-0.48484848484848486s"
                        repeatCount="indefinite"
                    />
                </circle>
                <circle cx="67" cy="0" r="7" fill="#6ad8f8" transform="translate(0 45.7883)">
                    <animateTransform
                        attributeName="transform"
                        type="translate"
                        values="0 117;0 -17"
                        keyTimes="0;1"
                        dur="1.5151515151515151s"
                        begin="-1.2727272727272727s"
                        repeatCount="indefinite"
                    />
                </circle>
            </pattern>
        </defs>
        <circle
            fill="url(#ldio-xhe8r862jqh-pattern)"
            cx="50"
            cy="50"
            r="40"
            stroke="#e15b64"
            stroke-width="5"
        />
    </svg>
    <h3
        style="margin:auto;display:block;position:fixed;left:50%;top:0;margin-left:-100px;margin-top:60px;"
    >加载中：{{ progress }}%</h3>
</template>
<script setup>
let props = defineProps({
    progress: Number,
});
</script>

<style scoped>
h3 {
    position: fixed;
    top: 100px;
    left: 50%;
    font-size: 30px;
    font-weight: 900;
}
</style>